/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import { Button } from "antd";
import * as esriLoader from 'esri-loader';
import icon from "../../image/gis_5g_station_normal.svg";
import { anyTypeAnnotation } from '@babel/types';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);


export const MapViewPort: React.FC = () => {
    var data = [  //json数据
        {  
            "name":"长城", 
            "x":116.016033, 
            "y":40.364233,  
            "desc":"长城（Great Wall），又称万里长城，是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。",
            "type":"cultureHeritage"
        },  
        {  
            "name":"莫高窟",
            "x":94.815602,
            "y":40.048747,  
            "desc":"莫高窟，俗称千佛洞，坐落在河西走廊西端的敦煌。它始建于十六国的前秦时期，历经十六国、北朝、隋、唐、五代、西夏、元等历代的兴建，形成巨大的规模，有洞窟735个，壁画4.5万平方米、泥质彩塑2415尊，是世界上现存规模最大、内容最丰富的佛教艺术地。",
            "type":"cultureHeritage"
        },  
        {  
            "name":"故宫",
            "x":116.403414,
            "y":39.924091,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },  
        {  
            "name":"秦始皇陵及兵马俑坑",
            "x":109.289337,
            "y":34.392294,  
            "desc":"秦始皇陵是中国历史上第一个皇帝——秦始皇帝的陵园，也称骊山陵。兵马俑坑是秦始皇陵的陪葬坑，位于陵园东侧1500米处。其规模之大、陪葬坑之多、内涵之丰富，为历代帝王陵墓之冠。",
            "type":"cultureHeritage"
        },
        {  
            "name":"周口店北京人遗址",
            "x":115.938822,
            "y":39.696296,  
            "desc":"周口店遗址博物馆坐落在北京城西南房山区周口店龙骨山脚下，是一座古人类遗址博物馆，始建于1953年。1929年，中国古人类学家裴文中先生在龙骨山发掘出第一颗完整的“北京猿人”头盖骨化石，震撼了全世界。",
            "type":"cultureHeritage"
        },
        {  
            "name":"拉萨布达拉宫历史建筑群",
            "x":91.125103,
            "y":29.660384,  
            "desc":"布达拉宫（藏文：པོ་ཏ་ལ，藏语拼音：bo da la，威利：po ta la），坐落于于中国西藏自治区的首府拉萨市区西北玛布日山上，是世界上海拔最高，集宫殿、城堡和寺院于一体的宏伟建筑，也是西藏最庞大、最完整的古代宫堡建筑群。",
            "type":"cultureHeritage" 
        },
        {  
            "name":"峨眉山-乐山大佛",
            "x":103.450213,
            "y":29.575827,  
            "desc":"峨眉山（Mount Emei）山头位于中国四川省乐山市峨眉山市境内，是中国“四大佛教名山”之一，地势陡峭，风景秀丽，素有“峨眉天下秀”之称，山上的万佛顶最高，海拔3099米，高出峨眉平原2700多米。《峨眉郡志》云：“云鬘凝翠，鬒黛遥妆，真如螓首蛾眉，细而长，美而艳也，故名峨眉山。”",
            "type":"doubleHeritage"
        },
        {  
            "name":"九寨沟国家级自然保护区",
            "x":103.925277,
            "y":33.273815,  
            "desc":"九寨沟：世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、国家级自然保护区、国家地质公园、世界生物圈保护区网络，是中国第一个以保护自然风景为主要目的的自然保护区。",
            "type":"natureHeritage"
        }   
    ];
    var map: any;
    function componentDid() {

        esriLoader.loadModules([
            "esri/map",
            "esri/symbols/PictureMarkerSymbol",
            "esri/geometry/Point",
            "esri/SpatialReference",
            "esri/graphic",
            "esri/InfoTemplate",
            "esri/layers/ArcGISTiledMapServiceLayer", 
            "esri/layers/GraphicsLayer", 
            "dojo/_base/Color",
        ]).then(([Map, PictureMarkerSymbol, Point, SpatialReference, Graphic, InfoTemplate, ArcGISTiledMapServiceLayer, GraphicsLayer, Tiled, Color]) => {
            map = new Map('mapCon', {
                basemap: 'osm',
                center: [116.403414, 39.924091],
                zoom: 15
            });
            // var tiled = new Tiled("http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer",{"id":"tiled"});  
            // map.addLayer(tiled);  
            // var mapCenter = new Point(103.847, 36.0473, {"wkid":4326});  
            // map.centerAndZoom(mapCenter,3);

            // var gLyr = new GraphicsLayer({"id":"gLyr"});  
            // map.addLayer(gLyr);  
            // var gLyrLbl = new GraphicsLayer({"id":"gLyrLbl"});  
            // map.addLayer(gLyrLbl);

            map.on("load",function(){
                for(var i=0;i<data.length;i++){
                    console.log('111', data[i]);
                    var pt = new Point(data[i].x,data[i].y);  
                    var pms = new PictureMarkerSymbol(icon, 50, 50); 
                    var gImg = new Graphic(pt, pms);
                    var infoTemplate = new InfoTemplate();
                    infoTemplate.setTitle(data[i].name);
                    infoTemplate.setContent(data[i].desc);
                    gImg.setInfoTemplate(infoTemplate);
                    map.graphics.add(gImg);
                }
                // map.on("mouse-over",function(e: any){ 
                //     var attr = e.graphic.attributes;  
                //     showInfo(attr);
                // });
            });
            
            function showInfo(attr: any){  
                var pt=new Point(attr.x,attr.y,{"wkid":4326});//WGS84的点  
                map.infoWindow.setTitle(attr.name);  
                map.infoWindow.setContent(attr.desc);
                map.infoWindow.show(pt);  
            }
            // map.on("load",function () {
            //     var newPoint = new Point(103.723501, 36.09882);
            //     var picSymbol = new PictureMarkerSymbol(icon, 50, 50);
            //     var picGraphic = new Graphic(newPoint, picSymbol);
            //     // 弹窗
            //     // var infoTemplate = new InfoTemplate();
            //     // infoTemplate.setTitle("今天天气真晴朗");
            //     // infoTemplate.setContent('<div>一颗绿油油的树</div>');
            //     // picGraphic.setInfoTemplate(infoTemplate);
            //     map.graphics.add(picGraphic);
            // })
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    function autoCenter () {
        // map.CenterAt([116.403414, 39.924091]);
        console.log('222');
    }
    function goToPoint () {}

    return (
        <div id="mapCon">
            <div className={'div-option'} style={{position: 'absolute', right: '3%', top: '3%', display: 'grid', zIndex: 9999}}>
                {/* <Button type={'primary'} onClick={autoCenter}>自动调整地图视口</Button>
                <Button type={'primary'} onClick={goToPoint}>聚焦某个点且调整地图Level</Button> */}
            </div>
        </div>
    )
}
